<div class="create-mosaic-page">
  <div class="container-fluid main">

    <div class="row">
      <div class="col-md-10">
        <h2>{{ 'MOSAIC_SUPPLY_CHANGE_TITLE' | translate }}</h2>
      </div>
    </div>

    <div class="row">
  	  <div class="col-md-6">

        <div class="panel-heading">
          <div class="tabDescription">
            <span ng-show="!$ctrl.formData.isMultisig">{{ 'MOSAIC_SUPPLY_CHANGE_NAME' | translate }}</span>
            <span ng-show="$ctrl.formData.isMultisig">{{ 'MOSAIC_SUPPLY_CHANGE_MULTISIG_NAME' | translate }}</span>
          </div>
          <ul class="nav nav-tabs">
            <li ng-class="$ctrl.formData.isMultisig ? '' : 'active'"><a ng-click="$ctrl.formData.isMultisig = false;$ctrl.updateCurrentAccountMosaics()">{{ 'GENERAL_TAB_NORMAL' | translate }}</a></li>
            <li ng-show="$ctrl._DataBridge.accountData.meta.cosignatoryOf.length" ng-class="$ctrl.formData.isMultisig ? 'active' : ''"><a ng-click="$ctrl.formData.isMultisig = true;$ctrl.updateCurrentAccountMosaics()">{{ 'GENERAL_TAB_MULTISIG' | translate }}</a></li>
          </ul>
        </div>
        <div class="panel-body">
          <fieldset>
            <!-- MULTISIG ACCOUNT -->
            <fieldset class="form-group" ng-show="$ctrl.formData.isMultisig">
              <div class="input-group">
                <span class="input-group-btn">
                  <label for="namespaceParent" class="control-label">{{ 'GENERAL_ACCOUNT' | translate }}:</label>
                </span>
                <select class="form-control" ng-options="(acc.address | fmtContact:$ctrl.contacts) for acc in $ctrl._DataBridge.accountData.meta.cosignatoryOf track by acc.address" ng-model="$ctrl.formData.multisigAccount" ng-change="$ctrl.updateCurrentAccountMosaics()">
                </select>
              </div>
            </fieldset>
            <!-- MULTISIG ACCOUNT BALANCE -->
            <fieldset class="form-group" ng-show="$ctrl.formData.isMultisig && $ctrl.formData.multisigAccount">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{'FORM_SIDE_BTN_BALANCE' | translate}}: </label>
                </span>
                <div class="form-control formFloat" readOnly>
                  <input class="readOnly" type="text" value="{{ ($ctrl.formData.multisigAccount.balance | fmtNemValue)[0] }}.{{ ($ctrl.formData.multisigAccount.balance | fmtNemValue)[1] }}" readOnly/>
                  <label class="floatRight"><small>XEM</small></label>
                </div>
              </div>
            </fieldset>
            <!-- SELECT THE MOSAIC -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label for="namespaceParent" class="control-label">{{ 'MOSAIC_SUPPLY_CHANGE_SELECT' | translate }}: </label>
                </span>
            	  <select class="form-control" ng-options="mosaicName for mosaicName in $ctrl.currentAccountMosaicNames" ng-model="$ctrl.selectedMosaic" ng-change="$ctrl.updateMosaic()">
                </select>
              </div>
            </fieldset>
            <!-- TRANSACTION FEE -->
             <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{'GENERAL_FEE' | translate}}: </label>
                </span>
                <div class="form-control formFloat" readOnly>
                  <span class="feeAmount">
                    <!-- Multisig fee -->
                    <span ng-show="$ctrl.formData.isMultisig">{{($ctrl.formData.innerFee | fmtNemValue)[0]}}.{{($ctrl.formData.innerFee | fmtNemValue)[1]}} +</span>
                    <!-- Transaction fee -->
                    <span>{{($ctrl.formData.fee | fmtNemValue)[0]}}.{{($ctrl.formData.fee | fmtNemValue)[1]}}</span>
                  </span>
                  <label class="floatRight"><small>XEM</small></label>
                </div>
              </div>
            </fieldset>
            <!-- PASSWORD FIELD -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label ng-class="!$ctrl.common.password.length ? 'has-error' : ''">{{ 'FORM_PASSWORD' | translate }}:</label>
                </span>
                <input class="form-control form-control-lg" type="password" placeholder="{{ 'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}" ng-model="$ctrl.common.password" ng-class="!$ctrl.common.password.length ? 'has-error' : ''"/>
              </div>
            </fieldset>
            <button class="btn btn-success pull-xs-right" type="submit" style="width:100%;" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length || !$ctrl.formData.delta || $ctrl.selectedMosaic == 'nem:xem'" ng-click="$ctrl.send()">
              <i class="fa fa-send"></i> {{ 'GENERAL_SEND' | translate }}
            </button>
          </fieldset>
        </div>
      </div>

      <div class="col-md-6">
        <div class="panel-heading">
          <h3>{{ 'MOSAIC_SUPPLY_CHANGE_SUPPLY' | translate }}</h3>
        </div>
        <div class="panel-body">
          <!-- ORIGINAL MOSAIC SUPPLY -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'MOSAIC_SUPPLY_CHANGE_CURRENT_SUPPLY' | translate }}: </label>
              </span>
              <div class="form-control formFloat mosaic block" disabled >
                <strong>{{$ctrl._DataBridge.mosaicDefinitionMetaDataPair[$ctrl.selectedMosaic].supply}}</strong>
                <span class="text-muted">.{{(0 | fmtSupply:$ctrl._DataBridge.mosaicOwned[$ctrl.currentAccount][$ctrl.selectedMosaic].mosaicId:$ctrl._DataBridge.mosaicDefinitionMetaDataPair)[1]}}</span>
                <label class="floatRight reverseEllipsis"><small>{{ $ctrl.selectedMosaic }}</small></label>
              </div>
            </div>
          </fieldset>
          <!-- CREATE OR DELETE MOSAIC -->
          <fieldset class="form-group row changeType">
            <div class="col-sm-4">
              <label>{{ 'MOSAIC_SUPPLY_CHANGE_TYPE' | translate }}: </label>
            </div>
            <div class="col-sm-4">
              <label>
                <input type="radio" ng-model="$ctrl.formData.supplyType" ng-value="1"> {{ 'MOSAIC_SUPPLY_CHANGE_TYPE_1' | translate }}
              </label>
            </div>
            <div class="col-sm-4">
              <label>
                <input type="radio" ng-model="$ctrl.formData.supplyType" ng-value="2"> {{ 'MOSAIC_SUPPLY_CHANGE_TYPE_2' | translate }}
              </label>
            </div>
          </fieldset>
          <!-- CREATE/DELETE AMOUNT -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'MOSAIC_SUPPLY_CHANGE_AMOUNT' | translate }}: </label>
              </span>
              <div class="form-control formFloat">
                <input class="levy" type="number" ng-model="$ctrl.formData.delta" min="0">
                <label class="floatRight reverseEllipsis"><small>{{ $ctrl.selectedMosaic }}</small></label>
              </div>
            </div>
          </fieldset>
          <!-- RESULTING MOSAIC SUPPLY -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'MOSAIC_SUPPLY_CHANGE_RES_SUPPLY' | translate }}</label>
              </span>
              <div class="form-control formFloat" disabled >
                <span ng-show="$ctrl.formData.supplyType === 1">
                  <strong>{{($ctrl.formData.delta + $ctrl._DataBridge.mosaicDefinitionMetaDataPair[$ctrl.selectedMosaic].supply)}}</strong>
                  <span class="text-muted">.{{(0 | fmtSupply:$ctrl._DataBridge.mosaicOwned[$ctrl.currentAccount][$ctrl.selectedMosaic].mosaicId:$ctrl._DataBridge.mosaicDefinitionMetaDataPair)[1]}}</span>
                </span>
                <span ng-show="$ctrl.formData.supplyType === 2">
                  <strong>{{(-$ctrl.formData.delta + $ctrl._DataBridge.mosaicDefinitionMetaDataPair[$ctrl.selectedMosaic].supply)}}</strong>
                  <span class="text-muted">.{{(0 | fmtSupply:$ctrl._DataBridge.mosaicOwned[$ctrl.currentAccount][$ctrl.selectedMosaic].mosaicId:$ctrl._DataBridge.mosaicDefinitionMetaDataPair)[1]}}</span>
                </span>
                <label class="floatRight reverseEllipsis"><small>{{ $ctrl.selectedMosaic }}</small></label>
              </div>
            </div>
          </fieldset>
        </div>
      </div>

    </div>
  </div>
</div>
